@charset "utf-8";
@import "reset";
html{
    font-size: 40px;
      }
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
body{
    font-size: 16px;
}
//pc
.about_or_all{
    width: 45%;
    margin: 0 auto; 
    margin-top: 10%;
    >h5{
        text-align: center;
    }
    
    >h5:first-child>a{
        font-size:r(52);
       
        color: #636463;
    }
    >h5:nth-of-type(2){
        text-align: left;
        line-height: 4;
        >a{
            
            font-size:r(52);
        color: #636463;
        }
    }
    >h5:nth-of-type(3){
        text-align: right;
        line-height: 4;
        >a{
            
            font-size:r(52);
        color: #636463;
        }
    }
    >h5>a:hover{
        color: #fec6b2;
       font-size:r(60);
    }
    >p{
        line-height: 2;
        padding-top: 5%;
        padding-bottom: 5%;
        letter-spacing: 1px;
            font-size: 21px;
    }
    >p:nth-of-type(2){
         padding-top: 0%;
    }
    >p:nth-of-type(3){
         padding-top: 0%;
         padding-bottom: 30%;
    }
    >img{
        width: 100%;
    }
    >img:hover{
            transform: scale(1.05);
            
        }
    .about_or_img1{
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        margin: 0 auto;
        margin-top: 3%;
        >img{
             width: r(316);
            height: r(221);
            margin-left: 5%;
        }
        >img:hover{
            transform: scale(1.05);
            
        }
    }
    .about_or_img2{
        display: flex;
        display: -webkit-flex;
        flex-direction:row;
        width: 92%;
        margin-right: 0%;
        .about_or_img2_lf{
            width: 70%;
            >img{
                width: 13.5rem;
                height: r(650);
            }
            >img:hover{
            transform: scale(1.05);
            
        }
        }
        .about_or_img2_rt{
         display: flex;
        display: -webkit-flex;
        flex-direction:column;
        justify-content:flex-start;
         width: 30%;
            >img{
                width: r(314);
                height: r(222);
            }
            >img:nth-of-type(2){
                margin-top: 8%;
            }
            >img:hover{
            transform: scale(1.05);
            
        }
        }
    }
}

//移动
@media only screen and (max-width:768px){
    .about_or_all{
        width: 95%;
        margin: 0 auto; 
        margin-top: 10%;
        >h5{
            text-align: center;
        }
        >h5:first-child>a{
            font-size:25px;
           
            color: #636463;
        }
        >h5:nth-of-type(2){
            text-align: center;
            line-height: 4;
            >a{
                
                 font-size:25px;
                color: #636463;
            }
        }
        >h5:nth-of-type(3){
            text-align:center;
            line-height: 4;
            >a{
                
                font-size:25px;
            color: #636463;
            }
        }
        >p{
            width:99%;
            margin: 0 auto;
            line-height: 1.5;
            padding-top: 5%;
            padding-bottom: 5%;
            letter-spacing: 0px;
            font-size: 18px;
        }
        >p:nth-of-type(2){
             padding-top: 0%;
        }
        >p:nth-of-type(3){
             padding-top: 0%;
             padding-bottom: 30%;
        }
        >img{
            width: 100%;
        }
        .about_or_img1{
            display: flex;
            display: -webkit-flex;
            justify-content: flex-end;
            margin: 0 auto;
            margin-top: 0%;
            flex-wrap: wrap;
            >img{
              width: 100%;
              height: auto;
                margin-left: 5%;
                margin: auto;
            }
            
        }
        .about_or_img2{
            display: flex;
            display: -webkit-flex;
            flex-direction:row;
            width: 100%;
             flex-wrap: wrap;
            .about_or_img2_lf{
                width: 100%;
                margin-right: 0%;
                >img{
                    width:100%;
                    height: auto;
                }
            }
            .about_or_img2_rt{
             display: flex;
            display: -webkit-flex;
            flex-direction:column;
            justify-content:flex-start;
             width: 100%;
                >img{
                    width:100%;
                    height: auto;
                }
                >img:nth-of-type(2){
                    margin-top: 2%;
                }
            }
        }
    }
}